<template>
  <div class="alls">
    <div class="kuang">
      <div class="pd_tb20 font22 text_center">
        <span style="font-weight: bold; font-size: 24px">{{
          isLogin ? "登录" : "注册"
        }}</span>
      </div>
      <div>
        <div class="pd_tb20">
          <input
            v-model="form.username"
            class="inputs"
            type="text"
            placeholder="请输入账号"
          />
        </div>
        <div class="pd_tb20">
          <input
            v-model="form.password"
            class="inputs"
            type="password"
            placeholder="请输入密码"
          />
        </div>
        <div class="pd_tb20" v-if="!isLogin">
          <input
            v-model="form.confirmPassword"
            class="inputs"
            type="password"
            placeholder="请再次输入密码"
          />
        </div>
        <div class="pd_tb20 text_center">
          <el-radio-group v-model="isLogin">
            <el-radio :value="true">登录</el-radio>
            <el-radio :value="false">注册</el-radio>
          </el-radio-group>
        </div>
        <div class="buttons">
          <el-button
            style="width: 100%; height: 50px; color: #fff"
            color="#279c55"
            @click="submit"
            >{{ isLogin ? "确定" : "注册" }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { userApi } from "@/api/index"; // 引入 API 函数

const router = useRouter();

// 表单数据
const form = reactive({
  username: "",
  password: "",
  confirmPassword: "",
});

// 登录/注册模式切换
const isLogin = ref(true);

// 提交（登录或注册）
const submit = async () => {
  if (form.username === "" || form.password === "") {
    ElMessage({
      type: "error",
      message: "账号或密码不能为空",
    });
    return;
  }

  if (!isLogin.value) {
    // 注册模式
    if (form.password !== form.confirmPassword) {
      ElMessage({
        type: "error",
        message: "两次输入的密码不一致",
      });
      return;
    }

    const user = await userApi.register({
      username: form.username,
      password: form.password,
    });
    if (user) {
      ElMessage({
        type: "success",
        message: "注册成功，请登录",
      });
      // 清空表单
      form.username = "";
      form.password = "";
      form.confirmPassword = "";
      // 切换到登录模式
      isLogin.value = true;
    } else {
      ElMessage({
        type: "error",
        message: "用户名已存在",
      });
    }
  } else {
    // 登录模式

    // 模拟账号密码登录
    if (form.username === "zhangjingwen" && form.password === "12345678") {
      ElMessage({
        type: "success",
        message: "登录成功",
      });
      // 保存用户名到 localStorage
      localStorage.setItem("USERNAME", form.username);
      // 清空表单
      form.username = "";
      form.password = "";
      // 延迟跳转到首页
      setTimeout(() => {
        router.push({ path: "/" });
      }, 1500);
      return;
    }

    // 正常后端登录
    const user = await userApi.login(form.username, form.password);
    if (user) {
      ElMessage({
        type: "success",
        message: "登录成功",
      });
      // 保存用户名到 localStorage
      localStorage.setItem("USERNAME", form.username);
      // 清空表单
      form.username = "";
      form.password = "";
      // 延迟跳转到首页
      setTimeout(() => {
        router.push({ path: "/" });
      }, 1500);
    } else {
      ElMessage({
        type: "error",
        message: "用户名或密码错误",
      });
    }
  }
};
</script>

<style scoped>
/* 样式保持不变 */
* {
  margin: 0;
  padding: 0;
}
.alls {
  background-image: url("../assets/bjt2.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* background: #f7f7f7; */
  width: 100%;
  min-height: 100vh;
  /* height: 100vh; */
  display: flex;
  /* align-items: center; */
  justify-content: center;
}

.kuang {
  border-radius: 4px;
  /* box-shadow: 4px 4px 4px 0px #f7f7f7; */
  margin: auto;
  padding: 40px;
  /* background: rgba(255, 255, 255, 0.2); */
  background: #fff;
  /* width: 600px; */
  height: 400px;
}

.inputs {
  font-size: 18px;
  width: 350px;
  height: 60px;
  padding: 0 20px;
  border: 2px solid #dcdfe6;
  transition: all 0.8s;
}

.inputs:focus {
  outline: none;
  border: 2px solid #279c55;
}

.buttons {
  margin: 40px 0;
}

.rongqi1280 {
  width: 1280px;
  /* width: 1600px; */
  margin: auto;
}

.bg_f1 {
  background: #f1f1f1;
}

.mg_l4 {
  margin-left: 4px;
}

.mg_l8 {
  margin-left: 8px;
}

.white {
  color: #fff;
}

.bg_f1 {
  background: #f1f1f1;
}

.pd_tb20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.pd_tb10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.bold {
  font-weight: bold;
}

.font22 {
  font-size: 22px;
}

.font18 {
  font-size: 18px;
}

.flex {
  display: flex;
}

.items_center {
  align-items: center;
}

.between {
  justify-content: space-between;
}

.min_width80 {
  min-width: 80px;
}

.pd_b10 {
  padding-bottom: 10px;
}

.pd_tb10 {
  padding: 10px 0;
}

.color_c2c2 {
  color: #c2c2c2;
}

.color_929292 {
  color: #929292;
}

.chengse {
  color: #fd9e35;
}

.lanse {
  color: #3394ff;
}

.hongse {
  color: #ff3833;
}

.text_center {
  text-align: center;
}

.pd_b20 {
  padding-bottom: 20px;
}

.font14 {
  font-size: 14px;
}
</style>